<template>
  <div class="app-container">
    <el-card shadow="never" class="app_container_header">
      <el-form :model="initData" label-width="110px">
        <el-row>
          <el-col :span="8">
            <el-form-item prop="id" label="派件任务编号: ">
              <el-input
                v-model="initData.id"
                placeholder="请输入派件任务编号"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="orderId" label="订单编号: ">
              <el-input
                v-model="initData.orderId"
                placeholder="请输入订单编号"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="agencyId" label="所属营业部: ">
              <cy-tree-select
                v-model="value"
                :placeholder="'请选择目的地机构'"
                filterable
                :data="options"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="signStatus" label="签收状态:">
              <el-select
                v-model="initData.signStatus"
                placeholder="请选择"
                clearable
                style="width: 100%"
              >
                <el-option label="已签收" value="1" />
                <el-option label="拒收" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计完成时间:">
              <div class="block">
                <el-date-picker
                  v-model="EstimatedEndTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实际完成时间:">
              <div class="block">
                <el-date-picker
                  v-model="ActualEndTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%"
                />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="assignedStatus" label="任务分配状态:">
              <el-select
                v-model="initData.assignedStatus"
                placeholder="请选择"
                clearable
                style="width: 100%"
              >
                <el-option label="已分配" value="2" />
                <el-option label="待人工分配" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="0">
              <el-button
                class="app_container_search"
                type="primary"
                @click="fnSearch"
              >搜索</el-button>&nbsp;
              <el-button
                class="app_container_rest"
                @click="fnReset"
              >重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" class="nav_change">
      <el-tag
        :class="{ active: index === 0 }"
        @click="changeList(0, null)"
      >全部</el-tag>
      <el-tag
        :class="{ active: index === 1 }"
        @click="changeList(1, 1)"
      >新任务</el-tag>
      <el-tag
        :class="{ active: index === 2 }"
        @click="changeList(2, 2)"
      >已完成
      </el-tag>
    </el-card>
    <el-card shadow="never" class="app_container_list">
      <el-button
        type="primary"
        style="margin-bottom: 20px"
        @click="manualDistribution"
      >人工分配</el-button>
      <el-table
        ref="pickupTasks"
        v-loading="loading"
        tooltip-effect="dark"
        :data="list"
        :header-cell-style="{ background: '#f8faff' }"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          fixed="left"
          :class-name="cellClass"
          :selectable="checkSelectable"
          type="selection"
          width="60"
        />
        <el-table-column label="序号" width="80">
          <template #default="slot">
            {{ (initData.page - 1) * initData.pageSize + slot.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="派件作业编号" width="160" />
        <el-table-column prop="orderId" label="订单编号" width="180" />
        <el-table-column prop="agencyName" label="所在营业部" width="180" />
        <el-table-column prop="assignedStatus" label="任务分配状态" width="120">
          <template #default="{ row }">
            <span v-if="row.assignedStatus === 2" class="Assigned">已分配</span>
            <span v-else class="toBeAssigned">待人工分配</span>
          </template>
        </el-table-column>
        <el-table-column prop="courierName" label="快递员姓名" width="120" />
        <el-table-column prop="signStatus" label="签收状态" width="80">
          <template #default="{ row }">
            <span>{{
              row.signStatus === 1
                ? "已签收"
                : row.signStatus === 2
                  ? "已拒收"
                  : "未签收"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="signRecipient" label="签收人" width="100">
          <template #default="{ row }">
            <span>{{ row.signRecipient === 1 ? "本人" : "代收" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="estimatedStartTime"
          label="预计开始时间"
          width="160"
        />
        <el-table-column
          prop="estimatedEndTime"
          label="预计完成时间"
          width="160"
        />
        <el-table-column prop="actualEndTime" label="实际完成时间" width="160" />
      </el-table>
      <el-pagination
        :current-page.sync="initData.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size.sync="initData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog title="人工分配" :visible.sync="dialogVisible" width="35%" @close="fnCancel">
      <el-form>
        <el-form-item label="选择快递员: " label-width="100px">
          <el-select
            v-model="courierId"
            placeholder="请选择"
            clearable
            filterable
          >
            <el-option
              v-for="item in CourierList"
              :key="item.userId"
              :label="item.name"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="fnOk">确认</el-button>&nbsp;
        <el-button @click="fnCancel">取消</el-button>
      </div>
    </el-dialog>
    <Footer />
  </div>
</template>

<script>
import { getDepartTree } from '@/api/base'
import { getInitData, getCourierList, dispatchExpress } from '@/api/transport'
export default {
  data() {
    return {
      options: [], // 树形数据
      value: '', // 树形数据选中
      index: 0, // 高亮
      initData: {
        // 初始化数据
        agencyId: null,
        assignedStatus: null,
        id: null,
        orderId: null,
        signStatus: null,
        page: 1,
        pageSize: 10,
        taskType: 2
      },
      EstimatedEndTime: [],
      ActualEndTime: [],
      time: [],
      CourierData: {
        // 快递员初始化数据
        page: 1,
        pageSize: 1000,
        agentId: ''
      },
      courierId: '', // 快递员id
      CourierList: [], // 快递员列表
      list: [], // 列表数据
      checkedList: [], // 选中的列表
      total: 0, // 总数
      loading: false, // 是否加载,
      dialogVisible: false // 是否显示对话框
    }
  },
  computed: {
    cellClass() {
      if (!this.list?.every((item) => item.assignedStatus === 3)) {
        return 'cellClass'
      }
      return ''
    }
  },
  created() {
    this.getTree()
    this.getInitData()
    this.getCourierList()
  },
  methods: {
    // 初始化树状图
    async getTree() {
      const res = await getDepartTree()
      this.options = JSON.parse(res)
    },
    // 列表初始化
    async getInitData() {
      this.loading = true
      const res = await getInitData(this.initData)
      this.total = +res?.counts
      this.list = res?.items
      this.loading = false
    },
    // 初始化快递员列表
    async getCourierList() {
      const res = await getCourierList(this.CourierData)
      this.CourierList = res.items
    },
    // 头部搜索逻辑
    async fnSearch() {
      if (this.EstimatedEndTime?.length) {
        this.initData.minEstimatedEndTime = this.fnTime(
          this.EstimatedEndTime[0]
        )
        this.initData.maxEstimatedEndTime = this.fnTime(
          this.EstimatedEndTime[1]
        )
      }
      if (this.ActualEndTime?.length) {
        this.initData.minActualEndTime = this.fnTime(this.ActualEndTime[0])
        this.initData.maxActualEndTime = this.fnTime(this.ActualEndTime[1])
      }
      this.initData.page = 1
      this.initData.agencyId = this.value
      await this.getInitData()
      this.$message.success('搜索成功')
    },
    // 转换时间
    fnTime(val) {
      const date = new Date(val)
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s
    },
    // 头部重置
    fnReset() {
      this.initData = {
        // 初始化数据
        agencyId: null,
        assignedStatus: null,
        id: null,
        orderId: null,
        signStatus: null,
        page: 1,
        pageSize: 10,
        taskType: 2
      }
      this.EstimatedEndTime = ''
      this.ActualEndTime = ''
      this.value = ''
      this.getInitData()
    },
    // 点击切换高亮和重新渲染
    async changeList(index, status) {
      this.index = index
      this.initData.status = status
      this.getInitData()
    },
    // pageSize改变时触发
    handleSizeChange(val) {
      this.initData.pageSize = val
      this.getInitData()
    },
    handleCurrentChange(val) {
      this.initData.page = val
      this.getInitData()
    },
    // 选中的列表
    async handleSelectionChange(val) {
      this.checkedList = val
      console.log(this.checkedList)
      if (this.checkedList?.length) {
        this.CourierData.agentId = this.checkedList[0].agencyId
        this.getCourierList()
      }
    },
    // 点击人工分配按钮逻辑
    manualDistribution() {
      if (this.checkedList?.length === 0) {
        return this.$message.error('请选择分配人员')
      } else {
        this.dialogVisible = true
      }
    },
    // 判断是否可选中
    checkSelectable(row) {
      return row.assignedStatus === 3
    },
    async fnOk() {
      if (!this.courierId) return this.$message.error('请选择快递员')
      const data = this.checkedList.map(item => item.id)
      await dispatchExpress(this.courierId, data)
      this.$message.success('分配成功')
      this.fnCancel()
      this.getInitData()
    },
    fnCancel() {
      this.courierId = ''
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  padding-left: 0;
  padding-bottom: 0;
  .el-form-item__label {
    font-weight: 400;
    color: #20232a;
    font-size: 14px;
    padding-left: 10px;
  }
  .el-col {
    padding: 0 30px;
    &:last-child {
      height: 40px;
    }
    .block {
      width: 100%;
    }
    .el-button {
      width: 90px;
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      padding: 10px 20px !important;
      border-radius: 5px !important;
      font-weight: 400;
    }
    .app_container_search {
      height: 40px;
    }
    .app_container_rest {
      margin-left: 12px;
    }
  }
}
.nav_change {
  margin-top: 20px;
  margin-bottom: 20px;
  height: 48px;
  ::v-deep .el-card__body {
    padding: 0;
    .el-tag {
      padding: 0;
      height: 48px;
      width: 120px;
      line-height: 48px;
      text-align: center;
      background-color: #fff;
      color: #333;
      font-size: 14px;
      cursor: pointer;
      border: 0;
    }
  }
}
.active {
  background-color: #ffeeeb !important;
  color: #e15536 !important;
}
.app_container_list {
  :deep(.el-card__body) {
    padding: 28px;
    padding-bottom: 0;
    .el-table {
      border: 1px solid #ebeef5;
      .el-table__cell {
        &:first-child {
          .cell {
            padding: 0 14px 0 20px;
          }
        }
        &:last-child {
          .cell {
            padding: 0;
          }
        }
      }
    }

    .el-pagination {
      width: 100%;
      text-align: center;
      margin-top: 20px;
      padding: 0;
      padding-bottom: 40px;
    }
  }
}
.Assigned {
  &::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #419eff;
    content: "";
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 2px;
  }
}
.toBeAssigned::before {
  background-color: #e15536;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 6px;
  margin-bottom: 2px;
}
:deep(.el-dialog) {
  border-radius: 8px;
  .el-dialog__header {
    padding: 15px 30px;
    border-radius: 8px 8px 0 0;
    background-color: #f3f4f7;
  }
  .el-dialog__body {
    padding: 40px 60px 0;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
    .el-form-item {
      width: 100%;
      .el-form-item__label {
        font-weight: 400;
        color: #20232a;
        text-align: left;
      }
      .el-input__inner {
        width: 380px;
      }
    }
  }
  .el-dialog__footer {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .dialog-footer {
    padding-bottom: 38px;
    .el-button {
      width: 90px;
    }
  }
}
:deep(.el-card) {
  .cellClass {
    .cell {
      margin: 0 14px 0 20px;
      padding: 0 !important;
      cursor: not-allowed;
      overflow: visible;
    }
    .cell .el-checkbox {
      pointer-events: none !important;
    }
    .cell .el-checkbox__inner {
      position: relative;
      overflow: hidden;
    }
    .cell .el-checkbox__inner::before {
      position: absolute;
      content: "";
      display: block;
      background-color: #edf2fc;
      width: 100%;
      height: 100%;
    }
  }
}
:deep(.el-table__body-wrapper) {
    &::-webkit-scrollbar{
     background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
     border-radius: 10px;
     border: 4px solid #fff;
     background-color: #dddee0;
    }
   }
</style>
